import React, { Component } from "react"
import './index.css'
import Header from './Header'
import List from './List'
import Footer from './Footer'

class Todo extends Component {
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: false },
      { id: '003', name: '打代码', done: false },
      { id: '004', name: '逛街', done: true }
    ]
  }

  add = (todo) => {
    let { todos } = this.state
    let newTodos = [todo, ...todos]
    this.setState({
      todos: newTodos
    })
  }

  // 改变状态
  changeStatus = (id, status) => {
    let { todos } = this.state
    let newTodos = todos.map(todo => {
      if (todo.id === id) { todo.done = status }
      return todo
    })
    this.setState({
      todos: newTodos
    })
  }

  // 删除
  deleteTodo = (id) => {
    const { todos } = this.state
    let newTodos = todos.filter(todo => {
      return todo.id !== id
    })
    this.setState({
      todos: newTodos
    })
  }

  // 清除已完成的
  deleteDone = () => {
    const { todos } = this.state
    let newTodos = todos.filter(todo => {
      return !todo.done
    })
    this.setState({
      todos: newTodos
    })
  }

  // 全选反选
  changeAllStatus = (status) => {
    let { todos } = this.state
    let newTodos = todos.map(todo => {
      todo.done = status
      return todo
    })
    this.setState({
      todos: newTodos
    })
  }

  render() {
    return (
      <div className="container">
        <Header add={this.add} />
        <List todos={this.state.todos} changeStatus={this.changeStatus} deleteTodo={this.deleteTodo} />
        <Footer todos={this.state.todos} deleteDone={this.deleteDone} changeAllStatus={this.changeAllStatus}/>
      </div>
    )
  }
}

export default Todo